<template>
  <div>
    <el-table
      :data="data"
      ref="tablePublic"
      border
      highlight-current-row
      :max-height="hasNoHeight || 1000"
      @selection-change="handleSelectionChange"
      @expand-change="handleExpandChange"
      @row-click="handleRowClick"
      :style="'width:' + (width || '100%')"
    >
      <el-table-column
        v-if="select || select === ''"
        type="selection"
        width="43"
      >
      </el-table-column>
      <el-table-column
        v-if="index || index === ''"
        type="index"
        :fixed="isFixed ? 'left' : null"
        label="序号"
        align="center"
        width="50"
      >
      </el-table-column>
      <slot name="headerSlot"></slot>
      <template v-for="(item, index) in tableHead">
        <el-table-column
          v-if="!hasDefaultSlot && tableHead"
          :key="index"
          :fixed="item.fixed"
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
          align="center"
          :formatter="item.formatter"
          :width="item.width"
        >
        </el-table-column>
      </template>
      <slot></slot>
      <slot name="footerSlot"></slot>
    </el-table>
    <div class="pageBox" v-if="hasPage">
      <el-pagination
        background
        @current-change="currentChange"
        @size-change="sizeChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :layout="layout"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "table-public",
  data() {
    return {
      position: "left",
      pageSizes: [10, 20, 30, 40, 50, 100],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: []
    };
  },
  //tableData:绑定数据
  //index:是否有序号
  //tableHead:表头
  //left,right:分页左右位置
  //page:是否有分页
  //getList:分页后查询方法
  //indexFixed:序号固定
  //select:是否能被勾选
  //left,right:分页选择器的位置
  //noPageSizes:是否可改变每页条数
  props: [
    "data",
    "index",
    "tableHead",
    "left",
    "right",
    "page",
    "width",
    "getList",
    "indexFixed",
    "select",
    "noHeight",
    "expandChange",
    "noPageSizes"
  ],
  computed: {
    hasDefaultSlot() {
      return (
        Object.keys(this.$slots).length > 0 &&
        !this.$slots.headerSlot &&
        !this.$slots.footerSlot
      );
    },
    hasPage() {
      return this.page || this.page === "";
    },
    isFixed() {
      return this.indexFixed || this.indexFixed === "";
    },
    hasNoHeight() {
      return this.noHeight || this.noHeight === "";
    },
    layout() {
      if (this.noPageSizes || this.noPageSizes === "") {
        return "total,prev,pager,next,jumper";
      } else {
        return "total,prev,pager,next,jumper,sizes";
      }
    }
  },
  created() {
    if (this.right || this.right === "") {
      this.position = "right";
    } else {
      this.position = "left";
    }
  },
  mounted() {
    $(".pageBox").css("float", this.position);
  },
  methods: {
    //改变当前页
    currentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //改变每页数量
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //展开与收缩
    toggleRowExpansion(row, status) {
      this.$refs["tablePublic"].toggleRowExpansion(row, status);
    },
    //展开收缩事件
    handleExpandChange(row, expanded) {
      this.expandChange(row, expanded);
    },
    //单行点击
    handleRowClick(row) {
      this.$refs.tablePublic.toggleRowSelection(row);
    },
    //对表格进行重新布局
    doLayout() {
      this.$refs.tablePublic.doLayout();
    }
  }
};
</script>

<style scoped>
.pageBox {
  margin-top: 15px;
}
</style>
